<!DOCTYPE html>
<html lang="en-US">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Coming Soon Bootstrap 4 Template Demo</title>
    <meta name="description" content="Demo of A Free Coming Soon Bootstrap 4 Template"/>
    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/styles/main.css" rel="stylesheet">
      <script src="/static/js/echarts.js"></script>
    <script src="http://echarts.baidu.com/asset/map/js/world.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
  </head>
  <body id="top">
  <div id="heapmap"></div>
  <div class="site-wrapper">
  <div class="site-wrapper-inner">
    <div class="cover-container">
      <div class="masthead clearfix">
        <div class="inner">
{#          <h3 class="masthead-brand">Coming Soon</h3>#}
          <nav class="nav nav-masthead">
{#            <a class="nav-link nav-social" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>#}
{#            <a class="nav-link nav-social" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>#}
{#            <a class="nav-link nav-social" href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>#}
{#            <a class="nav-link nav-social" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>#}
          </nav>
        </div>
      </div><br>      <div class="inner cover">
        <h1 class="cover-heading">Ipv6-地图可视化</h1>
        <p class="lead cover-copy">点击查看ipv6-热力图</p>
        <p class="lead"><button type="button" class="btn btn-lg btn-default btn-notify" data-toggle="modal" data-target="#subscribeModal">Notify Me</button></p>
      </div>
      <div class="mastfoot">
        <div class="inner">
          <!-- <p>&copy; Your Company. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>.</p> -->
        </div>
      </div>

      <div class="modal fade" id="subscribeModal" tabindex="-1" role="dialog" aria-labelledby="subscribeModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">

            <div class="modal-header">
              <h5 class="modal-title" id="subscribeModalLabel">ipv6-heatmap:</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>

            </div>

{##}
{#            <div class="modal-body">#}
{#              <form>#}
{#                <div class="form-group">#}
{#                  <label for="recipient-name" class="form-control-label">Enter you e-mail to get notified when we launch</label>#}
{#                  <input type="text" class="form-control" id="recipient-name" placeholder="your-name@example.com">#}
{#                </div>#}
{#              </form>#}
{#            </div>#}
{##}
{#            <div class="modal-footer">#}
{#              <button type="button" class="btn btn-default">Subscribe</button>#}
{#            </div>#}
          </div>
        </div>
    </div>

  </div>
</div>
</body>
{#    <script src="/static/js/main.js"></script>#}
      <script>
    var myChart = echarts.init(document.getElementById('heapmap'));
        option = {
            title: {
                text: '全球ipv6',
                {#sublink: 'http://esa.un.org/wpp/Excel-Data/population.htm',#}
                left: 'center',
                top: 'top'
            },
             tooltip: {
                 trigger: 'item',
                 formatter: '{b}-ipv6数量：{c}'
             },

            visualMap: {
                min: 0,
                max: 712343,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                 inRange: {
                            color: ['lightskyblue','yellow','orangered'] //颜色
                        },
                        textStyle: {
                            color: '#fff'
                        },
            },
            series: [
                {
                    name: 'World Ipv6',
                    type: 'map',
                    mapType: 'world',
                    roam: true,
                    itemStyle: {
                        emphasis: {label: {show: true}}
                    },
                    data : [{'name': 'Andorra', 'value': 4}, {'name': 'United Arab Emirates', 'value': 214}, {'name': 'Afghanistan', 'value': 9}, {'name': 'Anguilla', 'value': 776}, {'name': 'Albania', 'value': 106}, {'name': 'Armenia', 'value': 203}, {'name': 'Angola', 'value': 7}, {'name': 'Antarctica', 'value': 2}, {'name': 'Argentina', 'value': 2581}, {'name': 'American Samoa', 'value': 1}, {'name': 'Austria', 'value': 5019}, {'name': 'Australia', 'value': 13432}, {'name': 'Aruba', 'value': 2}, {'name': 'Aland Islands', 'value': 0}, {'name': 'Azerbaijan', 'value': 66}, {'name': 'Bosnia and Herzegovina', 'value': 314}, {'name': 'Barbados', 'value': 16}, {'name': 'Bangladesh', 'value': 614}, {'name': 'Belgium', 'value': 8357}, {'name': 'Burkina Faso', 'value': 2}, {'name': 'Bulgaria', 'value': 971}, {'name': 'Bahrain', 'value': 106}, {'name': 'Burundi', 'value': 2}, {'name': 'Benin', 'value': 6}, {'name': 'Saint Barthelemy', 'value': 23}, {'name': 'Bermuda', 'value': 13}, {'name': 'Brunei', 'value': 9}, {'name': 'Bolivia', 'value': 105}, {'name': 'Bonaire Saint Eustatius and Saba', 'value': 1}, {'name': 'Brazil', 'value': 19127}, {'name': 'Bahamas', 'value': 2}, {'name': 'Bhutan', 'value': 205}, {'name': 'Botswana', 'value': 29}, {'name': 'Belarus', 'value': 4237}, {'name': 'Belize', 'value': 37}, {'name': 'Canada', 'value': 63108}, {'name': 'Democratic Republic of the Congo', 'value': 4}, {'name': 'Central African Republic', 'value': 0}, {'name': 'Republic of the Congo', 'value': 9}, {'name': 'Switzerland', 'value': 12600}, {'name': 'Ivory Coast', 'value': 11}, {'name': 'Cook Islands', 'value': 0}, {'name': 'Chile', 'value': 329}, {'name': 'Cameroon', 'value': 11}, {'name': 'China', 'value': 137812}, {'name': 'Colombia', 'value': 634}, {'name': 'Costa Rica', 'value': 321}, {'name': 'Cuba', 'value': 2}, {'name': 'Cape Verde', 'value': 2}, {'name': 'Curacao', 'value': 9}, {'name': 'Cyprus', 'value': 84}, {'name': 'Czech Republic', 'value': 16213}, {'name': 'Germany', 'value': 352721}, {'name': 'Djibouti', 'value': 7}, {'name': 'Denmark', 'value': 3306}, {'name': 'Dominica', 'value': 0}, {'name': 'Dominican Republic', 'value': 63}, {'name': 'Algeria', 'value': 87}, {'name': 'Ecuador', 'value': 3518}, {'name': 'Estonia', 'value': 6595}, {'name': 'Egypt', 'value': 238}, {'name': 'Eritrea', 'value': 0}, {'name': 'Spain', 'value': 5773}, {'name': 'Ethiopia', 'value': 0}, {'name': 'Finland', 'value': 3143}, {'name': 'Fiji', 'value': 7}, {'name': 'Micronesia', 'value': 13}, {'name': 'Faroe Islands', 'value': 28}, {'name': 'France', 'value': 239525}, {'name': 'Gabon', 'value': 8}, {'name': 'United Kingdom', 'value': 42537}, {'name': 'Grenada', 'value': 14}, {'name': 'Georgia', 'value': 60}, {'name': 'French Guiana', 'value': 4}, {'name': 'Guernsey', 'value': 2}, {'name': 'Ghana', 'value': 13}, {'name': 'Gibraltar', 'value': 148}, {'name': 'Greenland', 'value': 4}, {'name': 'Gambia', 'value': 1}, {'name': 'Guinea', 'value': 0}, {'name': 'Guadeloupe', 'value': 6}, {'name': 'Equatorial Guinea', 'value': 13}, {'name': 'Greece', 'value': 8629}, {'name': 'Guatemala', 'value': 53}, {'name': 'Guam', 'value': 22}, {'name': 'Guinea-Bissau', 'value': 0}, {'name': 'Guyana', 'value': 17}, {'name': 'Hong Kong', 'value': 14220}, {'name': 'Honduras', 'value': 67}, {'name': 'Croatia', 'value': 253}, {'name': 'Haiti', 'value': 16}, {'name': 'Hungary', 'value': 1534}, {'name': 'Indonesia', 'value': 2594}, {'name': 'Ireland', 'value': 10023}, {'name': 'Israel', 'value': 981}, {'name': 'Isle of Man', 'value': 13}, {'name': 'India', 'value': 12840}, {'name': 'British Indian Ocean Territory', 'value': 0}, {'name': 'Iraq', 'value': 173}, {'name': 'Iran', 'value': 250}, {'name': 'Iceland', 'value': 227}, {'name': 'Italy', 'value': 12573}, {'name': 'Jersey', 'value': 56}, {'name': 'Jamaica', 'value': 3}, {'name': 'Jordan', 'value': 261}, {'name': 'Japan', 'value': 60969}, {'name': 'Kenya', 'value': 139}, {'name': 'Kyrgyzstan', 'value': 29}, {'name': 'Cambodia', 'value': 113}, {'name': 'Kiribati', 'value': 0}, {'name': 'Comoros', 'value': 0}, {'name': 'Saint Kitts and Nevis', 'value': 301}, {'name': 'South Korea', 'value': 60072}, {'name': 'Kuwait', 'value': 44}, {'name': 'Cayman Islands', 'value': 25}, {'name': 'Kazakhstan', 'value': 204}, {'name': 'Laos', 'value': 28}, {'name': 'Lebanon', 'value': 68}, {'name': 'Saint Lucia', 'value': 9}, {'name': 'Liechtenstein', 'value': 30}, {'name': 'Sri Lanka', 'value': 147}, {'name': 'Liberia', 'value': 9}, {'name': 'Lesotho', 'value': 0}, {'name': 'Lithuania', 'value': 1529}, {'name': 'Luxembourg', 'value': 107087}, {'name': 'Latvia', 'value': 245}, {'name': 'Libya', 'value': 0}, {'name': 'Morocco', 'value': 96}, {'name': 'Monaco', 'value': 0}, {'name': 'Moldova', 'value': 123}, {'name': 'Montenegro', 'value': 8}, {'name': 'Saint Martin', 'value': 2}, {'name': 'Madagascar', 'value': 3}, {'name': 'Marshall Islands', 'value': 2}, {'name': 'Macedonia', 'value': 37}, {'name': 'Mali', 'value': 0}, {'name': 'Myanmar', 'value': 46}, {'name': 'Mongolia', 'value': 43}, {'name': 'Macao', 'value': 51}, {'name': 'Northern Mariana Islands', 'value': 0}, {'name': 'Martinique', 'value': 0}, {'name': 'Mauritania', 'value': 0}, {'name': 'Malta', 'value': 21}, {'name': 'Mauritius', 'value': 989}, {'name': 'Maldives', 'value': 22}, {'name': 'Malawi', 'value': 17}, {'name': 'Mexico', 'value': 2622}, {'name': 'Malaysia', 'value': 1300}, {'name': 'Mozambique', 'value': 16}, {'name': 'Namibia', 'value': 18}, {'name': 'New Caledonia', 'value': 231}, {'name': 'Niger', 'value': 0}, {'name': 'Nigeria', 'value': 35}, {'name': 'Nicaragua', 'value': 39}, {'name': 'Netherlands', 'value': 33160}, {'name': 'Norway', 'value': 13035}, {'name': 'Nepal', 'value': 86}, {'name': 'Nauru', 'value': 1}, {'name': 'New Zealand', 'value': 1273}, {'name': 'Oman', 'value': 118}, {'name': 'Panama', 'value': 62}, {'name': 'Peru', 'value': 399}, {'name': 'French Polynesia', 'value': 1}, {'name': 'Papua New Guinea', 'value': 23}, {'name': 'Philippines', 'value': 498}, {'name': 'Pakistan', 'value': 9377}, {'name': 'Poland', 'value': 2152}, {'name': 'Saint Pierre and Miquelon', 'value': 0}, {'name': 'Puerto Rico', 'value': 38}, {'name': 'Palestinian Territory', 'value': 28}, {'name': 'Portugal', 'value': 24248}, {'name': 'Palau', 'value': 0}, {'name': 'Paraguay', 'value': 108}, {'name': 'Qatar', 'value': 126}, {'name': 'Reunion', 'value': 13}, {'name': 'Romania', 'value': 2336}, {'name': 'Serbia', 'value': 101}, {'name': 'Russia', 'value': 47326}, {'name': 'Rwanda', 'value': 1}, {'name': 'Saudi Arabia', 'value': 517}, {'name': 'Solomon Islands', 'value': 0}, {'name': 'Seychelles', 'value': 14}, {'name': 'Sudan', 'value': 33}, {'name': 'Sweden', 'value': 5744}, {'name': 'Singapore', 'value': 6334}, {'name': 'Slovenia', 'value': 1718}, {'name': 'Slovakia', 'value': 455}, {'name': 'Sierra Leone', 'value': 0}, {'name': 'San Marino', 'value': 0}, {'name': 'Senegal', 'value': 2}, {'name': 'Somalia', 'value': 1}, {'name': 'Suriname', 'value': 15}, {'name': 'South Sudan', 'value': 2}, {'name': 'Sao Tome and Principe', 'value': 0}, {'name': 'El Salvador', 'value': 5}, {'name': 'Sint Maarten', 'value': 10}, {'name': 'Syria', 'value': 3}, {'name': 'Swaziland', 'value': 0}, {'name': 'Turks and Caicos Islands', 'value': 0}, {'name': 'Chad', 'value': 0}, {'name': 'Togo', 'value': 2}, {'name': 'Thailand', 'value': 2474}, {'name': 'Tajikistan', 'value': 5}, {'name': 'Tokelau', 'value': 0}, {'name': 'East Timor', 'value': 2}, {'name': 'Turkmenistan', 'value': 0}, {'name': 'Tunisia', 'value': 22}, {'name': 'Tonga', 'value': 2}, {'name': 'Turkey', 'value': 381}, {'name': 'Trinidad and Tobago', 'value': 74}, {'name': 'Tuvalu', 'value': 0}, {'name': 'Taiwan', 'value': 10439}, {'name': 'Tanzania', 'value': 88}, {'name': 'Ukraine', 'value': 1737}, {'name': 'Uganda', 'value': 41}, {'name': 'United States', 'value': 712343}, {'name': 'Uruguay', 'value': 318}, {'name': 'Uzbekistan', 'value': 12}, {'name': 'Vatican', 'value': 5}, {'name': 'Saint Vincent and the Grenadines', 'value': 0}, {'name': 'Venezuela', 'value': 43}, {'name': 'British Virgin Islands', 'value': 4}, {'name': 'U.S. Virgin Islands', 'value': 2}, {'name': 'Vietnam', 'value': 8651}, {'name': 'Vanuatu', 'value': 8}, {'name': 'Samoa', 'value': 2}, {'name': 'Yemen', 'value': 7}, {'name': 'South Africa', 'value': 1250}, {'name': 'Zambia', 'value': 6}, {'name': 'Zimbabwe', 'value': 14}]
                }
            ]
        };
        myChart.setOption(option);
      </script>

</html>